<template>
  <el-dialog v-if="fileInfo.show" :title="fileInfo.title" style="top: -40px" :visible.sync="fileInfo.show" @close="close" width="90%" append-to-body>
    <el-form :inline="true" :model="codeEditData" class="demo-form-inline" size="mini">
      <!-- 选择样式 -->
      <el-form-item label="主题">
        <el-select v-model="codeEditData.modality"  style="width: 150px" placeholder="请选择主题">
          <el-option label="白色" value="tomorrow" />
          <el-option label="淡黑" value="tomorrow_night" />
        </el-select>
      </el-form-item>
      <el-form-item>
      </el-form-item>
      <el-form-item label="字体大小">
        <el-input-number v-model="fontSize" controls-position="right" :min="10" @input="changeFontSize"></el-input-number>
      </el-form-item>
    </el-form>
    <editor
      ref="editData"
      v-model="content"
      @init="init"
      :lang="codeEditData.lang"
      :theme="codeEditData.modality"
      width="100%"
      height="500"
    ></editor>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="saveFile">保 存</el-button>
    <el-button @click="close">关 闭</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { getFileContent } from "@/api/gd/wjglfl";
// 获取文件内容
export default {
  name: "codeTemplate",
  components: {
    editor: require('vue2-ace-editor'),
  },
  props: {
    fileInfo: {
      type: Object
    }
  },
  data() {
    return {
      fontSize: 20,
      codeEditData:{
        lang: 'txt',
        modality: 'tomorrow'
      },
      content: '',
      editor: {}
      // 设置代码编辑器的样式
      // editorOptions: {
      //   enableBasicAutocompletion: true,
      //   enableSnippets: true,
      //   enableLiveAutocompletion: true,
      //   tabSize: 10,
      //   fontSize: 14,
      //   showPrintMargin: true, //去除编辑器里的竖线
      //   navigateWithinSoftTabs: true,
      //   enableEmmet: true,
      //   useElasticTabstops: false,
      //   useSoftTabs: true,
      //   enableMultiselect: true,
      //   autoScrollEditorIntoView: true,
      // },

    };
  },
  async created() {
    // 如果当前的文件路径不为空则，获取当前文件内容
    if (this.fileInfo.node.filepath !== undefined
      && this.fileInfo.node.filepath !== ''
      && this.fileInfo.node.filepath !== null) {
      await getFileContent(this.fileInfo.node.id).then(res => {
        this.content = res.data
      })
    }
  },
  methods: {
    init(editor) {
      this.editor = editor;
      this.editorInit()
      this.editor.setShowPrintMargin(true)
      this.updateFontSize();
    },
    updateFontSize() {  // 更新文字大小
      if (this.editor) {
        this.editor.setFontSize(this.fontSize);
      }
    },
    changeFontSize(val){ // 更新文字大小
      this.updateFontSize()
    },
    close() {
      this.$emit("close")
    },
    saveFile() {
      this.$emit("saveFile", this.fileInfo.node, this.content)
    },
    editorInit() {
      require('brace/mode/html')
      require('brace/mode/java')
      require('brace/mode/javascript')
      require("brace/mode/xml");
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/mode/sql")
      require("brace/mode/css")
      require("brace/theme/chrome");
      require('brace/theme/monokai')
      require("brace/theme/eclipse")
      require("brace/theme/ambiance")
      require("brace/theme/chaos")
      require("brace/theme/cobalt")
      require("brace/theme/textmate")
      require("brace/theme/dawn")
      require("brace/theme/dracula")
      require("brace/theme/dreamweaver")
      require("brace/theme/iplastic")
      require("brace/theme/katzenmilch")
      require("brace/theme/mono_industrial")
      require("brace/theme/kr_theme")
      require("brace/theme/tomorrow")
      require("brace/theme/tomorrow_night")
      require("brace/theme/tomorrow_night_blue")
      require("brace/theme/tomorrow_night_bright")
      require("brace/theme/tomorrow_night_eighties")
      require('brace/ext/emmet') //snippet
      require('brace/ext/language_tools') //language extension prerequsite...
      require("brace/ext/beautify")
      require("brace/ext/chromevox")
      require("brace/ext/error_marker")
      require("brace/ext/keybinding_menu")
      require("brace/ext/linking")
      require('brace/ext/searchbox') //language extension prerequsite...
      require('brace/ext/modelist')
      require('brace/ext/old_ie')
      require('brace/ext/settings_menu')
      require('brace/ext/spellcheck')
      require('brace/ext/split')
      require('brace/ext/static_highlight')
      require('brace/ext/statusbar')
      require('brace/ext/whitespace')
      require('brace/ext/textarea')
      require('brace/ext/themelist')
      require('brace/snippets/javascript') //snippet
      require('brace/snippets/dockerfile')
      require('brace/snippets/python')
      require('brace/snippets/html')
      require('brace/snippets/css')
      require('brace/snippets/ruby')
      require("brace/snippets/xml")
      require("brace/snippets/json")
      require("brace/snippets/java")
      require("brace/snippets/yaml")
      require("brace/snippets/less")
      require("brace/snippets/sql")
      require("brace/snippets/javascript")
    },
  }
}
</script>
